<template>
	<view class="more">
		<div class="tops">
			<span @click='back'>
				<img src="../../static/img/1/22.png" alt="">
			</span>
		</div>
		<view class="header">
			<image src="../../static/img/3/3-3.png" mode="widthFix"></image>
		</view>
		<view class="input">
			
			
			<view class="li">
				<image src="../../static/img/3/3-4.png" mode="widthFix"></image>
				<view class="x"></view>
				<input type="text"  v-model="username" placeholder="请输入账号" />
			</view>
			<view class="li">
				<image src="../../static/img/3/3-5.png" mode="widthFix"></image>
				<view class="x"></view>
				<input class="min" :type="typ" v-model="password"  placeholder="请输入密码" />
				<view class="right">
					<view class="b" @click="pass">
						<image :src="src" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="p">
				<navigator url="/pages/login/reg">忘记密码？</navigator>
			</view>
			<view class="sub" @click="login">
				立即登录
			</view>
			<view class="h1">
				<navigator url="/pages/login/next">创建一个新账户</navigator>
			</view>
			
			
			
		<!-- 	<view class="tname" style="margin-top: 59rpx;">
				<view class="sdl qq">
					<image src="../../static/img/1/10.png" mode="widthFix"></image>
				</view>
				<view class="sdl wx">
					<image src="../../static/img/1/83.png" mode="widthFix"></image>
				</view>
				<view class="sub" @click="login">
					小程序一键登录
				</view>
			</view> -->
		
			
			<view class="h1" style="margin-top: 51rpx;">
				登录即代表您已同意<navigator url="/pages/login/oder">《云上营家隐私政策》</navigator>
			</view>
		</view>
	</view>

</template>

<script>
	import { mapMutations } from 'vuex';
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				src: '../../static/img/3/3-6.png',
				typ:'password',
				username:'',
				password:''
			}
		},
		methods: {
			...mapMutations(['logins']),
			pass() {
				var s = this.src;
				if (s == '../../static/img/3/3-7.png') {
					this.src = '../../static/img/3/3-6.png';
					this.typ='password'
				} else {
					this.src = '../../static/img/3/3-7.png';
					this.typ='text'
				}
			},
			back(){
				window.onCloseSuccess = function (message) {
				    console.log(message)
				  }
				  //失败回调
				  window.onCloseError = function (message) {
				    console.log(message)
				  }
				try {
					let postParam = {
						className: "BaseBridge",
						function: "closeWebView",
						successCallBack: "onSuccess",
						failCallBack: "onError"
					}
					HandBridge.postMessage(JSON.stringify(postParam));
				} catch (err) {
					console.log(err)
					uni.navigateBack()
				}
			},
			login(){
				var that = this;
				that.$Request.post(
					that.$api.httpApi.login.logininfo,
					{"username":that.username,"password":that.password}
					).then(res=>{
						if(res.code == 200){
							uni.showToast({
								title:res.message,
								success:function(){
									uni.showToast({
										title:'登录成功！',
										icon:'none',
										duration:1500,
										success() {
											setTimeout(function(){
												that.$SysCache.put('token',res.data.token,43200)
												that.$SysCache.put('userInfo',res.data,43200)
												uni.navigateBack({
													
												})
												// uni.reLaunch({
												//     url: '/pages/index/index'
												// });
												// this.$api.prePage().addressData = item;
											},2000)
										}
									})
									
								}
							});
							that.logins(res.data)
							
						}else{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					})
			}
		}

	}
</script>

<style scoped>
	.tname {
		text-align: center;
		margin-top: 69rpx;
	}

	.tname .sdl {
		display: inline-block;
		width: 90rpx;
		height: 90rpx;
		background: rgba(232, 232, 232, 1);
		border-radius: 50%;
		margin-left: 29rpx;
		margin-right: 29rpx;
	}

	.tname .qq image {
		display: block;
		width: 40rpx;
		margin: auto;
		margin-top: 25rpx;
	}

	.tname .wx image {
		display: block;
		width: 50rpx;
		margin: auto;
		margin-top: 20rpx;
	}

	.tname .i {
		display: inline-block;
		vertical-align: middle;
		height: 1px;
		background: #DCDCDC;
		width: 154rpx;
	}

	.tname .text {
		display: inline-block;
		width: auto;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		vertical-align: middle;
		margin-left: 29rpx;
		margin-right: 29rpx;
	}

	.sub {
		display: block;
		width: 100%;
		height: 98rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 49rpx;
		margin-top: 49rpx;
		text-align: center;
		line-height: 98rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.h1 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: center;
		margin-top: 60rpx;
	}

	.h1 navigator {
		color: rgba(240, 64, 111, 1);
		display: initial;
	}

	.input {
		width: 75%;
		margin: auto;
		/* margin-top: 100rpx; */
	}

	.input .p {
		text-align: right;
		font-size: 28rpx;
		color: #B7B7B7;
	}

	.input .li {
		border-bottom: 1px solid #CECECE;
		padding-bottom: 12rpx;
		margin-bottom: 45rpx;
		margin-top: 72rpx;
	}

	.input .li image {
		width: 26rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.input .li input {
		display: inline-block;
		width: calc(100% - 90rpx);
		vertical-align: middle;
		margin-left: 21rpx;
		font-size: 30rpx;
		color: #B7B7B7;
		font-weight: normal;
		outline: none;
		background: none;
	}

	.input .li .min {
		display: inline-block;
		vertical-align: middle;
		margin-left: 21rpx;
		font-size: 30rpx;
		color: #B7B7B7;
		font-weight: normal;
		width: calc(100% - 180rpx);
		border: none;
		outline: none;
	}

	.input .li .right {
		width: calc(100% - 480rpx - 45rpx);
		margin-right: 16rpx;
		display: inline-block;
		vertical-align: middle;
		float: right;
	}

	.input .li .right .b {
		display: inline-block;
		width: 40rpx;
		vertical-align: middle;
		text-align: center;

	}

	.input .li .right .b image {
		display: inline-block;
		width: 100%;

	}

	.input .li .x {
		display: inline-block;
		vertical-align: middle;
		width: 1px;
		height: 30rpx;
		background: #E5E5E5;
		margin-left: 25rpx;
	}

	.input .li .right .but {
		font-size: 26rpx;
		width: calc(100% - 65rpx - 16rpx - 15rpx);
		margin-left: 25rpx;
		display: inline-block;
		vertical-align: middle;
		color: #8F8F94;
	}

	.more {
		 padding-top: 30rpx; 
	}
	.tops{
		padding-left: 31rpx;
		padding-right: 31rpx;
		padding-bottom: 35rpx;
	}
	.tops span{
		display: block;
		width: 28rpx;
		height: 28rpx;
	}
	.tops span img{
		display: block;
		width: 100%;
	}
	.header {
		display: block;
		width: 160rpx;
		margin: auto;
		border-radius: 50%;
		overflow: hidden;
	}

	.header image {
		display: block;
		width: 100%;
	}
</style>
